<template>
  <div class="liveDashboard">
    <el-card>
      <div class="title">
        <h4>统计模块</h4>
      </div>
    </el-card>

    <!-- 统计标签 -->
    <el-card style="margin-top: 1px;">
      <statisticsTag
        :data="optionsData"
        @searchStatus="searchStatus"
        v-if="optionsData.length"
      />
    </el-card>

    <!-- echarts -->
    <el-row class="echarts" style="margin-top: 20px;" :gutter="20">
      <el-col :span="18">
        <el-card style="height: 350px;">
          <div class="echarts_title">
            <img src="@/assets/images/addstudent.png" alt="" />
            <h4>新增学员趋势</h4>
          </div>
          <el-select
            v-model="statIndex"
            class="selectYear"
            @change="selectYearChange"
          >
            <el-option
              v-for="item in year"
              :key="item.id"
              :label="item.value"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <div id="durationEcharts" style="width: 100%; height: 300px;"></div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="clockDay" style="height: 350px;">
          <div class="clockDay_title">
            <img src="@/assets/images/good.png" alt="">
            <h4>学员打卡次数排行榜</h4>
            <!-- <div class="select">
              <el-select v-model="dayValue" placeholder="近七天">
                <el-option
                  v-for="item in clockDay"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div> -->
          </div>
          <div class="partition"></div>
          <div class="table">
            <el-row
              class="tableRow"
              :gutter="2"
              v-if="index < 5"
              v-for="(item, index) in clockin_ph"
              :key="item.id"
            >
              <el-col :span="6" align="center">
                <span v-if="index + 1 === 1 ? true : false">
                  <img src="@/assets/images/one.png" alt="" />
                </span>
                <span v-else-if="index + 1 === 2 ? true : false">
                  <img src="@/assets/images/two.png" alt="" />
                </span>
                <span v-else-if="index + 1 === 3 ? true : false">
                  <img src="@/assets/images/three.png" alt="" />
                </span>
                <span v-else>{{ index + 1 }}</span>
              </el-col>
              <el-col :span="10" align="center">
                {{ item.name }}
              </el-col>
              <el-col :span="8" align="center">
                {{ item.clockin_num }}次
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from "echarts";
import { changeTitleMinin } from "@/mixin";
import statisticsTag from "@/components/statisticsTag";
import http from "@/api/dashboard";
export default {
  name: "liveDashboard",
  mixins: [changeTitleMinin],
  components: {
    statisticsTag
  },
  data() {
    return {
      optionsData: [
        {
          label: "学员数量",
          total: 0,
          status: "studentBasis",
          icon: "icon-qianzaixueyuan",
          backgroundStart: "#17B5EB",
          backgroundEnd: "#1797EB",
          name: "user"
        },
        {
          label: "教师数量",
          total: 0,
          status: "teacherList",
          icon: "icon-jiaoshizhongxin",
          backgroundStart: "#F27450",
          backgroundEnd: "#F25751",
          name: "teacher"
        },
        {
          label: "班级数量",
          total: 0,
          status: "classRoomManage",
          icon: "icon-banji",
          backgroundStart: "#ffc31f",
          backgroundEnd: "#ffa41e",
          flag: "many",
          name: "classroom"
        },
        {
          label: "dyned",
          total: 0,
          status: "dynedAccountManage",
          icon: "icon-banjiguanli2",
          backgroundStart: "#a946eb",
          backgroundEnd: "#9346eb",
          name: "dyned"
        }
      ],
      clockDay: [
        { label: "近七天", value: 7 },
        { label: "今天", value: 1 }
      ],
      dayValue: 7,
      clockDayData: [
        {
          name: "测试",
          clock: 1
        },
        {
          name: "测试1",
          clock: 2
        }
      ],
      // tag标签总数
      count: [],
      // 月份
      month: [],
      // echarts数据
      stat: [],
      // echarts下拉框年份
      year: [],
      // 默认当前年份
      statIndex: 2020,
      // 打卡排行数据
      clockin_ph: []
    };
  },
  methods: {
    searchStatus(status) {
      switch (status) {
        case "studentBasis":
          this.$router.push({ name: "studentBasis" });
          break;
        case "teacherList":
          this.$router.push({ name: "teacherList" });
          break;
        case "classRoomManage":
          this.$router.push({ name: "classRoomManage" });
          break;
        case "dynedAccountManage":
          this.$router.push({ name: "dynedAccountManage" });
          break;
      }
    },
    selectYearChange() {
      console.log("this.statIndex", this.statIndex);
      this.drawEcharts();
    },
    drawEcharts() {
      let option = {
        backgroundColor: "#fff",
        // title: {
        //   text: "每月新增学员",
        //   textStyle: {
        //     fontWeight: "normal",
        //     fontSize: 16,
        //     color: "#333"
        //   },
        //   left: "6%"
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#333"
            }
          }
        },
        // legend: {
        //   icon: "rect",
        //   itemWidth: 14,
        //   itemHeight: 5,
        //   itemGap: 13,
        //   data: ["新增学员"],
        //   right: "4%",
        //   textStyle: {
        //     fontSize: 12,
        //     color: "#333"
        //   }
        // },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: "#333"
              }
            },
            data: this.month
          },
          {
            axisPointer: {
              show: false
            },
            // X轴封顶线
            axisLine: {
              lineStyle: {
                color: "#ccc"
              }
            },
            axisTick: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "（人）",
            axisTick: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#333"
              }
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 14
              }
            },
            splitLine: {
              lineStyle: {
                color: "#ccc"
              }
            }
          }
        ],
        series: [
          {
            name: "新增学员",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 1
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    { offset: 0, color: "rgba(24,94,249, 0.3)" },
                    {
                      offset: 0.8,
                      color: "rgba(24,94,249, 0)"
                    }
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: "rgb(24,94,249)",
                borderColor: "rgba(24,94,249,0.27)",
                borderWidth: 12
              }
            },
            data: this.stat[this.statIndex]
          }
        ]
      };
      this.$echartsFn.draweharts("durationEcharts", option);
    },
    getListData() {
      http.getList().then(res => {
        console.log("res", res);
        this.count = res.count;
        this.month = res.month;
        this.stat = res.stat;
        this.year = res.year;
        this.clockin_ph = res.clockin_ph;
        this.init();
      });
    },
    formatYear() {
      var arr = [];
      for (let index = 0; index < this.year.length; index++) {
        let obj = {};
        obj.id = this.year[index];
        obj.value = this.year[index];
        arr.push(obj);
      }
      this.year = arr;
    },
    init() {
      // 为tag 的total赋值
      this.optionsData.map(item => {
        for (let i in this.count) {
          if (item.name === i) {
            item.total = this.count[i];
          }
        }
      });
      this.formatYear();
      // 更新echarts图表
      this.drawEcharts();
    }
  },
  created() {},
  mounted() {
    this.getListData();
  }
};
</script>

<style lang="scss">
.liveDashboard {
  font-size: 20px;
  color: #333;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  overflow: auto;
  .echarts {
    .echarts_title {
      width: 200px;
      position: absolute;
      top: 20px;
      left: 30px;
      z-index: 1;
      display: flex;
      // justify-content: center;
      // align-items: center;
      overflow: hidden;
      h4 {
        margin: 3px 0 0 10px;
      }
    }
    .selectYear {
      position: relative;
      top: 30px;
      left: 80%;
      width: 80px;
      z-index: 1;
      /deep/ .el-input__inner {
        height: 20px;
        padding-left: 6px;
      }
    }
  }
  .clockDay {
    height: 340px;
    border: 0;
    /deep/ .el-card__body {
      padding: 0;
    }
    .partition {
      width: 100%;
      height: 1px;
      background: #ebebeb;
    }
    .clockDay_title {
      font-size: 16px;
      display: flex;
      // justify-content: space-between;
      align-items: center;
      padding: 20px;
      h4 {
        margin-left: 10px;
      }
      .select {
        width: 80px;
        /deep/ .el-input__inner {
          height: 20px;
          padding-left: 6px;
        }
      }
    }
    .table {
      padding: 0 20px;
      .el-row {
        height: 50px;
        padding: 10px 0;
        border-bottom: 1px solid #ebebeb;
        display: flex;
        .el-col {
          font-size: 14px;
          display: flex;
          flex-flow: column;
          justify-content: center;
        }
      }
    }
  }
}
</style>
